<template>
  <div class="item" @click="fn">
    <!-- 有些导航可能没有图片 ，src1可能没有值 -->
    <!-- 优化：使用槽口，由调用者决定组件内容 -->
    <!-- 槽口名称分两种情况 1默认图标normalImg，
                          2选中图标activeImg -->
    <slot :name="flag ? 'activeImg' : 'normalImg'"></slot>
    <p :class="{ active: flag }">{{ title }}-{{ flag }}</p>
  </div>
</template>

<script>
export default {
  props: ["title", "mark", "curr"],
  // 如果 curr == mark
  computed: {
    flag() {
      return this.mark == this.curr;
    },
  },
  methods: {
    fn() {
      //修改父组件的curr
      this.$emit("change", this.mark);
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  flex: 1;
  img {
    width: 30px;
    height: 30px;
  }
  .active {
    color: red;
  }
}
</style>